<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>编辑用户</title>
  <link rel="stylesheet" href="../../static/layui/css/layui.css"/>
  <link rel="stylesheet" href="../../static/css/common.css"/>
</head>
<body style="padding: 30px 30px 0;">
<div id="app">
  <form class="layui-form" lay-filter="form">
    <input name="id" style="display: none">
    <div class="layui-form-item">
      <div class="layui-form-label">用户名</div>
      <div class="layui-inline">
        <input class="layui-input layui-input-form" lay-verify="required" name="username">
      </div>
    </div>
    <div class="layui-form-item">
      <div class="layui-form-label">昵称</div>
      <div class="layui-inline">
        <input class="layui-input layui-input-form" lay-verify="required" name="nickName">
      </div>
    </div>
    <div class="layui-form-item">
      <div class="layui-form-label">角色</div>
      <div class="layui-inline">
        <div class="layui-input-form" id="role"></div>
      </div>
    </div>
    <div class="layui-form-item btn-div">
      <div class="layui-inline">
        <button class="layui-btn layui-btn-sm layui-btn-primary btn-save" @click="cancel">取消</button>
        <button class="layui-btn layui-btn-sm layui-btn-normal btn-save" lay-submit lay-filter="form" @click="save">保存</button>
      </div>
    </div>
  </form>
</div>
</body>
<script src="../../static/layui/layui.js"></script>
<script src="../../static/js/xm-select.js"></script>
<script src="../../static/js/axios.js"></script>
<script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>
<script src="../../static/js/http.js"></script>
<script src="../../static/js/vue3.js"></script>
<script src="../../static/js/common.js"></script>
<script>
  const app = {
    setup(){
      const state = Vue.reactive({
        userId: null,
        selected: null,
        roles: []
      })

      const getRoles = (userId) => {
        get('/api/sys/role/select', {userId: userId}).then(res => {
          if (res.success){
            Vue.nextTick(() => {
              state.selected = xmSelect.render({
                el: '#role',
                language: 'zn',
                data: res.data,
              })
            })
          } else {
            errorMsg(res.msg)
          }
        })
      }

      const save = () =>{
        Vue.nextTick(() => {
          const form = layui.form
          form.on('submit(form)', function (data) {
            state.roles = []
            if (state.selected.getValue() && state.selected.getValue().length > 0){
              state.selected.getValue().forEach((item) => {
                state.roles.push(item.value)
              })
            }
            if (state.roles.length === 0 ){
              waringMsg('请选择角色')
              return false
            }
            data.field.roles = state.roles
            post('/api/sys/user/edit', data.field).then(res => {
              if (res.success){
                successMsg(res.data)
                window.parent.getChild()
                cancel()
              } else {
                errorMsg(res.msg)
              }
            })
            return false
          })
        })
      }

      const cancel = () => {
        parent.layer.closeAll()
      }

      return {
        state,
        save,
        cancel,
        getRoles
      }
    }
  }
  const vue = Vue.createApp(app).mount('#app')

  function getParentData(data){
    if (data && data.id){
      vue.getRoles(data.id)
      const form = layui.form
      form.val('form', data)
    } else {
      vue.getRoles()
    }
  }
</script>
</html>